<template>
<el-container>
    <el-header>
      <el-card class="card-big" :body-style="{ padding: '0px' }">
      <div class="card-title">
      <img class="image" :src="this.course_infor.avatarUrl" >
      <div class="right-format" style="padding: 14px;">
        <span class="title-span">{{this.course_infor.courseName}}</span><br>
        <span class="content">开课老师：{{this.course_infor.teacher}}</span>
        <div class="bottom clearfix">
          <time class="time">{{this.course_infor.createTime}}</time><br>
          <el-button type="warning"  class="button" @click="addCourse" v-if="exit==0">立即加入</el-button>
          <el-button type="warning"  class="button" @click="into"  v-else>已参加，查看内容</el-button>
        </div>
      </div>
    </div>
    </el-card>
    </el-header>
      <el-main style="margin:140px">
          <el-container>
              <el-header >
              <el-menu router  class="el-menu-demo" mode="horizontal">
                    <el-menu-item index="/student/class_check/">课程内容</el-menu-item>
                    <el-menu-item index="/student/class_discuss">课程评论({{this.discussNum}})</el-menu-item>
              </el-menu>
              </el-header>
                  <el-main>
                      <router-view ></router-view>
                  </el-main>
          </el-container>
      </el-main>
</el-container>


</template>

<script>
import {getCookie} from '@/libs/cookie'
import {selectclass} from '@/api/modules/create_class'
import {discussNum} from '@/api/modules/coursediscuss'
import {add,judge} from '@/api/modules/coursemanager'
;

export default {
    name:'class_look',
    inject:['reload'],
    data(){
        return{
            courseID:{
                id:''
            },
            addcourse:{
              userId:'',
              courseId:'',
              nickname:''
            },
            loading: false,
            value: null,
            course_infor:{

            },
             message:{
              message1:'评论不能为空',
              message2:'评分不能为0',
              warning:'warning'
            },
           
            discussNum:'0',
            exit: 0,
            msg:'加入成功，可以开始学习',
            formData:{
              discuss:null,
              createTime: '',
              grade:null,
              praise: null,
              username:'',
              courseId:'',
              etc:''
            }
        }
    },
    mounted(){
         let courseID = JSON.parse(getCookie("courseID") || '{}');
         this.courseID.id = courseID
         this.addcourse.courseId = courseID
         this.formData.courseId = courseID
       //   console.log(this.courseID)
       let user = JSON.parse(getCookie("user") || '{}');
          this.addcourse.userId = user.id
          this.addcourse.nickname = user.nickname
          this.formData.username = user.nickname

         this.classInfor()
         this.classdiscuss()
         this.JudgeaddCourse()
    },
    methods:{
       into(){
      this.$router.push("/study/work");
      },


      addCourse(filter){
        filter = {
          ...filter,
          ...this.addcourse
        }
        add(filter).then(res =>{
               this.toast(this.msg,1)
               this.JudgeaddCourse()
          })
      },

      JudgeaddCourse(filter){
        filter = {
          ...filter,
          ...this.addcourse
        }
        judge(filter).then(res =>{
                this.exit = res.data.exit
                //console.log(res.data)
          })
      },
      
        classInfor(filter){
            filter = {
                ...filter,
                ...this.courseID
            }
            selectclass(filter).then(res =>{
                this.course_infor = res.data
               // console.log(res.data)
          })
        },
        classdiscuss(filter){
          
          filter = {
                ...filter,
                ...this.courseID
          }
          discussNum(filter).then(res =>{
                //console.log(res.data.discussNum)
                this.discussNum = res.data.discussNum
               
          })
        },

      }
   }
</script>


<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .card-big{
      width: 1000px;
      height: 200px;
      margin-left: 150px;
  }
  .card-title{
      display: flex;
     font-size: 30px;
     text-align: left;
  }
  .time {
    font-size: 13px;
    color: #999;
  }
  .content{
    font-size: 14px;
    color: rgba(153, 153, 153, 0.726);
  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 10;
    width: 150px;
    height: 40px;
    float: left;
    margin-top: 15px;
  }

  .image {
    width: 350px;
    height: 200px;
    min-height: 100%;
    margin-right: 16px;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>
